<template>
	<div class="handset-container">
		<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
			<ul class="handset-list">
				<router-link :to="'/home/shopInfo/' + item.id" class="handset-item" v-for="item in shoPList" :key="item.id" tag="li">
					<img :src="item.img_url" />
					<h4>{{ item.title }}</h4>
					<div class="info">
						<p class="shop-price">
							<span class="new">￥{{ item.sell_price }}</span>
							<span class="old">￥{{ item.market_price }}</span>
						</p>
						<p class="shop-number">
							<span>热卖中</span>
							<span>剩60件</span>
						</p>
					</div>
				</router-link>
			</ul>
		</mt-loadmore>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data(){
			return {
				index: 1,
				shoPList: [],
				allLoaded: false
			}
		},
		methods: {
			getShopList(){
				this.$http.get(`api/getgoods?pageindex=${this.index}`).then(res=>{
					if (res.body.status == 0) {
						this.shoPList = this.shoPList.concat(res.body.message);
					} else {
						Toast('数据加载失败！');
					}
				})
			},
			loadBottom(){
				this.index ++ ;
				this.getShopList();
				this.allLoaded = true;// 若数据已全部获取完毕
				this.$refs.loadmore.onBottomLoaded();
			}
		},
		created(){
			this.getShopList();
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.handset-container{
		margin: 0px;
		padding: 0px;
		background: #fff;
		.handset-list{
			margin: 10px;
			padding: 0px;
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.handset-item{
				width: 49%;
				border: 1px solid #ccc;
				box-shadow: 0 0 8px #ccc;
				margin-bottom: 5px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				img{
					width: 100%;
					min-height: 158px;
				}
				h4{
					font-size: 14px;
					font-weight: 500;
				}
				.info{
					background: #eee;
					p{
						padding: 5px;
						margin: 0;
					}
					.shop-price{
						.new{
							color: 18px;
							color: red;
							font-weight: 600;
						}
						.old{
							text-decoration: line-through;
							font-size: 12px;
							margin-left: 10px;
						}
					}
					.shop-number{
						font-size: 12px;
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}
	
</style>
